<!--  -->
<!--  -->
<template>
  <div class="Home">
    <h2 class="title">置业计划书统计</h2>
    <div class="allBox">
      <div class="caseSearch">
        <div class="caseBox">
          <Select
            v-model="ChooseCaseList"
            placeholder="请选择案场"
            multiple
            @on-change="caseChange"
            :max-tag-count="tagNum" 
            :max-tag-placeholder="maxTagPlaceholder"
            style="min-width: 220px; margin-right: 10px"
          >
            <Option
              v-for="(item, index) in caseList"
              :key="index"
              :value="item.buildingId"
              :label="item.buildingAlias"
            >
            </Option>
            </Option>
          </Select>
        </div>
        <div>
           <Button type="primary" @click="reVisitorExport">导出</Button>
        </div>
      </div>
      <div class="chooseText">
        <span
          :class="idx === index ? 'curr' : ''"
          v-for="(item, index) in topData"
          :key="index"
          @click="topChooseClick(index)"
          >{{ item }}</span
        >
        <em style="line-height: 30px; margin-left: 50px"> 自定义：</em
        ><DatePicker
          type="daterange"
          :clearable = 'false'
          @on-change="dataChoose"
          ref="oselect"
          :options="options"
          placeholder="请选择时间"
          style="width: 220px"
        ></DatePicker>
      </div>

      <div class="tab">
        <Table
          ref="TableHeight"
          :max-height="onresizeHeight"
          :columns="columns"
          :data="data"
          border
        >
        </Table>
      </div>

      <!-- 分页 -->
      <div class="pagePublicStyle" v-show="pageData.total > 0">
        <div class="totalCount">
          当前第 {{ pageData.current }} 页， 当前第
          {{ (pageData.current - 1) * pageData.rows + 1 }} 条到第
          {{
            pageData.current * pageData.rows > pageData.total
              ? pageData.total
              : pageData.current * pageData.rows
          }}
          条， 共 {{ pageData.total }} 条
        </div>
        <Page
          :total="pageData.total"
          :current="pageData.current"
          :page-size-opts="pageData.pageSizeOpts"
          @on-change="pageOnChangeFun"
          @on-page-size-change="pageOnPageSizeChangeFun"
          show-elevator
          show-sizer
          show-total
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getCaseList, getHousePlan } from "@/api/homeApi.js";
import { buildExport } from "@/common/axios";
export default {
  components: {},
  data() {
    return {
      onresizeHeight: 0, //tabl高
      caseList: [],
      ChooseCaseList: "",
      options: {
        disabledDate(date) {
          return (
            date &&
            date.valueOf() < new Date().getTime() - 365 * 2 * 24 * 3600 * 1000
          );
        },
      },

      topData: ["近七日", "本周", "本月"],
      idx: 1,
      dataCon: "",
      userMess: JSON.parse(this.$tool.getStorage("userMess")),
      startTime: "",
      endTime: "",
      tagNum: 1,
      dataChooseTime: ["", ""],

      columns: [
        {
          title: "日期",
          key: "date",
          align: "center",
        },
        {
          title: "需发数",
          key: "needSend",
          align: "center",
          // render: (h, params) => {
          //   return h(
          //     "div",
          //     {
          //       on: {
          //         click: (e) => {
          //           e.stopPropagation();
          //           this.needSendClick(params.row.needSendIds);
          //         },
          //       },
          //       style: {
          //         cursor: "pointer",
          //       },
          //     },
          //     params.row.needSend
          //   );
          // },
        },
        {
          title: "未发数",
          key: "noSend",

          align: "center",
          // render: (h, params) => {
          //   return h(
          //     "div",
          //     {
          //       on: {
          //         click: (e) => {
          //           e.stopPropagation();
          //           this.needSendClick(params.row.noSendIds)
          //         },
          //       },
          //       style: {
          //         cursor: "pointer",
          //       },
          //     },
          //     params.row.noSend
          //   );
          // },
        },
        {
          title: "发送率",
          key: "sendRate",

          align: "center",
        },
        {
          title: "阅读数",
          key: "hasRead",
          align: "center",
        },
        {
          title: "平均阅读时长",
          key: "averageReadingTime",
          align: "center",
        },
        {
          title: "转发客户数",
          key: "forwardCustomerNum",
          align: "center",
        },
        {
          title: "转发次数",
          key: "forwardNum",
          align: "center",
        },
      ],

      data: [],

      //分页
      pageData: {
        total: 0,
        current: 1,
        rows: 10,
        pageSizeOpts: [10, 20, 30, 40, 50],
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    //点击来客
    needSendClick(val) {
      console.log(val, "需发送");
      if (val.length) {
        // if (1) {
        this.$router.push({
          path: "/marketing_center/propertyReport/index",
        });
        this.$tool.setStorage({
          needSendsAll: JSON.stringify(val),
        });
      } else {
        this.$Message.warning("没有创建的置业报告。");
      }
    },

    caseChange(val) {
      console.log(val, "val");
      console.log(this.ChooseCaseList, "ChooseCaseLists");
      if (val.length > 1) {
        this.tagNum = 0;
      } else {
        this.tagNum = 1;
      }
      this.reHousePlan();
    },
    topChooseClick(index) {
      console.log(index, "zjz");
      this.idx = index;
      let falg = this.dataChooseTime.some((item) => {
        return item != "";
      });
      if (falg) {
        this.$refs.oselect.handleClear();
      }

      console.log(index, "index");

      if (index == 0) {
        this.startTime = this.$tool.getDayRi(-7);
        this.endTime = this.$tool.getDayRi(0);
        console.log(this.startTime, this.endTime, "近七日");
      } else if (index == 1) {
        this.startTime = this.$tool.getTimeRi(0);
        this.endTime = this.$tool.getTimeRi(-6);
        console.log(this.startTime, this.endTime, "本周");
      } else if (index == 2) {
        this.startTime = this.$tool.getMonthStartAndEnd(0)[0];
        this.endTime = this.$tool.getMonthStartAndEnd(0)[1];
        console.log(this.startTime, this.endTime, "本月");
      }

      this.reHousePlan();
    },
    dataChoose(val) {
      this.dataChooseTime = val;
      console.log(val, "riririri");
      let falg = val.some((item) => {
        return item != "";
      });
      if (falg) {
        this.dataText = "累计";
        this.idx = 999;
        this.startTime = val[0];
        this.endTime = val[1];
        this.reHousePlan();
      }

      console.log(this.startTime, this.endTime, "自定义");
    },

    maxTagPlaceholder(num) {
      return "已选择 " + num + "个楼盘";
    },

    //案场列表
    reCaseList() {
      let params = {
        userId: this.userMess.userId,
      };

      getCaseList(params)
        .then((res) => {
          console.log("案场列表", res);
          this.caseList = res.list;
          // this.ChooseCaseList = [this.caseList[0].buildingId];
          this.ChooseCaseList = JSON.parse(
            this.$tool.getStorage("caseBuildingId")
          );
        })
        .catch((err) => {
          console.log("cath");
          this.$Message.error(err);
        });
    },
    //访客详情分页查询
    reHousePlan() {
      if (!this.ChooseCaseList.length) {
        this.$Message.warning("请选择楼盘。");
        this.data = [];
        return false;
      }
      let params = {
        buildingIds: this.ChooseCaseList,
        startTime: this.startTime,
        endTime: this.endTime,
        pageNum: this.pageData.current,
        pageSize: this.pageData.rows,
      };
      getHousePlan(params)
        .then((res) => {
          console.log("置业计划书明细分页查询", res);
          this.data = res.pages.pageData;
          this.pageData.total = parseInt(res.pages.total);
          if (res.pages.pageData.length) {
            this.data.unshift({
              date: "汇总",
              needSend: res.needSendSum,
              noSend: res.noSendSum,
              sendRate: res.sendRateSum,
              hasRead: res.hasReadSum,
              averageReadingTime: res.averageReadingTimeSum,
              forwardCustomerNum: res.forwardCustomerNumSum,
              forwardNum: res.forwardNumSum,

              needSendIds: res.needSendSumList,
              noSendIds: res.noSendSumList,
            });
          }
          this.initTableHeight();
        })
        .catch((err) => {
          console.log("cath");
          this.$Message.error(err);
        });
    },
    //导出

    // 导出Excel

    reVisitorExport() {
      if (!this.ChooseCaseList.length) {
        this.$Message.warning("请选择楼盘。");
        return false;
      }
      if (this.data.length) {
        let params = {
          buildingIds: this.ChooseCaseList,
          startTime: this.startTime,
          endTime: this.endTime,
        };

        buildExport(
          "置业计划书统计",
          "/dt-business/count/housePlan/planExport",
          params
        );
      } else {
        this.$Message.warning("暂无数据！");
      }
    },

    // 分页 页码改变事件
    pageOnChangeFun(page) {
      this.pageData.current = page;
      this.reHousePlan();
    },
    // 分页 每页条数改变事件
    pageOnPageSizeChangeFun(page) {
      this.pageData.rows = page;
      this.reHousePlan();
    },
    // 初始化获取数据
    initTableHeight() {
      this.$nextTick(() => {
        this.onresizeHeight =
          window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 60;
      });
    },
  },
  created() {
    this.reCaseList();
    this.startTime = this.$tool.getTimeRi(0);
    this.endTime = this.$tool.getTimeRi(-6);
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        setTimeout(() => {
          this.onresizeHeight =
            window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 60;
        }, 10);
      })();
    };
  },
};
</script>
<style lang='scss' scoped>
.Home {
  padding: 20px;
  &_imgs {
    position: relative;
    &_img {
      width: 600px;
      position: absolute;
      left: 50%;
      top: 120px;
      transform: translateX(-50%);
    }
  }

  .caseSearch {
    overflow: hidden;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    // .caseBox {
    //   float: left;
    // }
  }

  .allBox {
    margin-top: 20px;
    .chooseText {
      margin-top: 10px;
      height: 40px;
      border-radius: 2px;
      padding: 5px;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      span {
        height: 30px;
        border: #dcdee2 1px solid;
        width: 90px;
        text-align: center;
        line-height: 30px;
        font-size: 14px;
        color: #666;
        cursor: pointer;
        margin-right: 5px;
      }
      span.curr {
        border: #2d8cf0 1px solid;
        color: #2d8cf0;
      }
    }

    .tab {
      margin-top: 20px;
    }
  }
  /* page */
  .pagePublicStyle {
    // text-align: right;
    padding: 14px 10px;
    // margin-right: 30px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
  }
}
</style>


